<template>
  <div class="top">
    <h2>大咖新动态</h2>
  </div>
  <ul>
    <li class="xindongtai" v-for="(item, index) in detail" :key="index">
      <div class="imgbox">
        <img :src="item.headUrl" alt="" />
      </div>

      <p>{{ item.celebrityName }}</p>
      <p>{{ item.recommendTag }}</p>
    </li>
  </ul>
</template>

<script setup>
import axios from "@/api/axios.js";
import { ref } from "vue";
const getDetail = () =>
  axios.get(
    "https://show.maoyan.com/maoyansh/myshow/ajax/celebrityBasicList/query?uuid=6074gamvnhk0bxpwvnzz95oqxeid9zl8z9wj1oj30cx8b20hrh1xknvnoxm2jyn7&clientType=1&os=1&sellChannel=13&cityId=1&lng=0&lat=0",
    {}
  );
const detail = ref([]);

async function update() {
  const { data } = await getDetail();
  detail.value = data.data;
  // console.log("detail", detail);
  // return detail;
}
update();
</script>

<style lang="scss" scoped>
.top{
  h2{
    font-weight: 600;
    font-size: 18rem;
  }
}
ul {
  display: flex;
  background-color: #f8f8f8;
}
.xindongtai {
  width: 90rem;
  height: 90rem;
  border-radius: 12rem;
  margin: 2rem 5rem 0 0;
  background-color: #fff;
  .imgbox {
    display: flex;
    width: 40rem;
    height: 40rem;
    margin:  10rem auto;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
    }
  }
  p{
    width: 72rem;
    text-align: center;
    font-size: 12rem;
  }
}
</style>
